<template>
  <PageTemplate>
    <div class="sys-dict" slot="content">
      <PageTableCollapse :collapseStatus="true">
        <el-row slot="title">
          <el-col>
            <div>
              {{dictGroupKey}}
            </div>
            <el-row class="row-empty-10"></el-row>
            <div>
              <el-button type="primary" @click="toList">
                {{$t('cm.return')}}
              </el-button>
              <el-button type="primary" @click="add" v-if="showBtn">
                <i class="el-icon-edit"></i> {{$t('cm.add')}}
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-table
          class="table"
          border
          ref="multipleTable"
          :data="tables"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{background:tableHeaderBGC}"
        >
          <el-table-column type="index" :label="$t('cm.no')" align="center" width="60"></el-table-column>
          <el-table-column prop="dictText" :label="$t('sys.dict_dictText')" align="center"></el-table-column>
          <el-table-column prop="dictKey" :label="$t('sys.dict_dictKey')" align="center"></el-table-column>
          <el-table-column prop="orderIndex" :label="$t('sys.dict_orderIndex')" align="center" width="80"></el-table-column>
           <el-table-column prop="systemDataDict" :label="$t('sys.system_data_dict')" align="center" width="80" :formatter="formatTableText"></el-table-column>
          <el-table-column prop="lastUpdateTime" :label="$t('cm.last_update_time')" :formatter="dateFormat" align="center"></el-table-column>
          <el-table-column prop="dictDesc" :label="$t('cm.desc')" align="center" width="250" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column :label="$t('cm.operate')" prop="statussss" align="center" >
            <template slot-scope="scope">
              <ListBtn :options="btns" :row-data="scope.row" @triggerListBtn="handleListBtn" :show-btn="showBtn"></ListBtn>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-empty-20"></el-row>
      </PageTableCollapse>
    </div>
  </PageTemplate>
</template>
<style lang="scss">
</style>
<script>
import { mapState, mapActions } from 'vuex'
import PageTemplate from '@/components/common/PageTemplate'
import PageTableCollapse from '@/components/common/PageTableCollapse'
import ListBtn from '@/components/btn/ListBtn'
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import {COMMON} from '@/utils/commonUtil'
import HasBtn from '@/mixins/HasBtn'
import sys_manage from '@/api/sys_manage'
import  {datetimetype} from '@/utils/datetime'


export default {
  components: { PageTemplate, PageTableCollapse, ListBtn },
  data () {
    return {
      query: {
        codeName: null,
        dictGroupName: null
      },
      tables:[],
      dictGroupKey: null,
      btns: [
        {
          value: 'edit',
          label: 'cm.edit'
        },
        // {
        //   value: 'del',
        //   label: 'cm.delete'
        // }
      ]
    }
  },
  created () {
    if (this.$router.history.current.params.id !== Constant.NEW_PARAMS) {
      this.dictGroupKey = this.$router.history.current.params.id
      this.sysDictLoadByPaging(this.$router.history.current.params.id)
    }
  },
  mixins: [HasBtn],
  watch: {
  },
  methods: {
    ...mapActions('common', [
      'queryCollapse'
    ]),
    sysDictLoadByPaging (id) {
      sys_manage.sysDictLoadByPaging({dictGroupKey: id}, result => {
      console.log("sysdict-97-",result.data);
        if (result.code === Constant.RT_SUCCESS) {
          this.tables = result.data
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    add () {
      COMMON.routerTo(Constant.ROUTE_SYS_DICT_EDIT.index, this.$router, { id: this.dictGroupKey })
    },
    edit (row) {
      COMMON.routerTo(Constant.ROUTE_SYS_DICT_EDIT.index, this.$router, { id: this.dictGroupKey, _id: row.id })
    },
    formatTableText (row, column, cellValue, index) {
      var fmtValue = null
      if (column.property === 'systemDataDict') {
        fmtValue = this.$t(Constant.SYSTEM_DATA_DICT_MAP[row.systemDataDict])
      }
      return fmtValue !== null && fmtValue !== undefined ? fmtValue : cellValue
    },
    toList () {
      COMMON.routerTo(Constant.ROUTE_SYS_DICT_GROUP.index, this.$router)
    },
    dateFormat(thistime, fmt) {
                    //console.log("-125Sysdist-",thistime);
                    //console.log("-126Sysdist-",fmt);
                    //console.log("-127Sysdist-",thistime.lastUpdateTime);
                    if (!COMMON.isNullOrUndefinedOrSpace(thistime.lastUpdateTime)) {
                          var date = new Date(thistime.lastUpdateTime)
                          var month =date.getMonth()+1;if(month<10){month="0"+month;}
                          var day =date.getDate();if(day<10){day="0"+day;}
                          var hours =date.getHours();if(hours<10){hours="0"+hours;}
                          var min= date.getMinutes();if(min<10){ min="0"+min; }
                          var sec= date.getSeconds();if(sec<10){sec="0"+sec;}
                        return  date.getFullYear() + '-' + month + '-' + day + '' + hours + ':' +min+':'+sec
                    }
                        return thistime.lastUpdateTime
                  }

  },
  mounted () {
  },

  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC
    })
  }
}
</script>
